<template>
  <div class="aside">
    <div class="aside-left">
      <personalInfo />
    </div>
    <div class="aside-right">
      <notice />
      <todo />
      <collect />
      <div class="grid grid-cols-3 gap-[10px]">
        <book />
        <oneCard />
        <mail />
        <salary />
        <property />
        <scientific />
      </div>
      <schedule />
    </div>
  </div>
</template>
<script setup lang="ts">
import personalInfo from "./personalInfo.vue";
import notice from "./notice.vue";
import todo from "./todo.vue";
import collect from "./collect.vue";
import book from "./book.vue";
import oneCard from "./oneCard.vue";
import mail from "./mail.vue";
import salary from "./salary.vue";
import property from "./property.vue";
import scientific from "./scientific.vue";
import schedule from "./schedule.vue";
</script>

<style lang="less" scoped>
.aside {
  display: grid;
  grid-template-columns: 30% calc(70% - 10px);
  gap: 10px;
  &-left,
  &-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
</style>
